<script setup lang="ts">
import { Overlay, Tabbar, TabbarItem, Loading as VantLoading } from 'vant'

const loading = computed(() => Loading.state)

const route = useRoute()
const navList = [
  { title: '主页', path: '/', icon: 'home-o' },
  { title: '设置', path: '/config', icon: 'setting-o' },
]
const active = ref(navList.findIndex(x => x.path === route.fullPath))

const keepAliveList = [
  'OrdersIndex',
]
</script>

<template>
  <div min-h-100vh bg-gray-100>
    <Overlay :show="loading" z-index="1000000" flex flex-col items-center justify-center>
      <VantLoading color="white" />
      <div c-white>
        加载中
      </div>
    </Overlay>
    <!-- <KeepAlive>
      <RouterView />
    </KeepAlive> -->
    <!-- <RouterView v-if="!$route.meta.keepAlive" /> -->

    <RouterView v-slot="{ Component }">
      <KeepAlive :include="keepAliveList">
        <component :is="Component" />
      </KeepAlive>
    </RouterView>

    <Tabbar v-if="navList.map(x => x.path).includes($route.path)" v-model="active">
      <TabbarItem
        v-for="item in navList"
        :key="item.path"
        :icon="item.icon"
        @click="$router.push(item.path)"
      >
        {{ item.title }}
      </TabbarItem>
    </Tabbar>
  </div>
</template>
